﻿<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <title>SuperMgr前端框架</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <!--全局通用框架样式 begin-->
    <!-- 全局基本样式 -->
    <link href="../content/superui/min/css/superui.common.min.css" rel="stylesheet" />
    <!-- 全局主题样式 -->
    <link href="../content/superui/global/css/components.min.css" id="style_components" rel="stylesheet" />
    <link href="../content/superui/pages/layouts/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
    <!--全局通用框架样式 end-->
</head>
<body class="page-content-white">
    <div class="page-container">
        <div class="page-content">
            <div class="row">
                <div class="col-md-12">
                    <div class="note note-info">
                        <h4 class="block">UI颜色集合</h4>
                        <p>
                            直接通过(e.g: <code>.blue-madison</code>) class的方式给 portlets, buttons, statistic blocks, tiles and other containers等元素设置颜色.
                        </p>
                    </div>

                    <div class="row">
                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <div class="color-demo tooltips" data-original-title="点击查看demo" data-toggle="modal" data-target="#demo_modal_white">
                                <div class="color-view bg-white bg-font-white bold uppercase"> #ffffff </div>
                                <div class="color-info bg-white c-font-14 sbold"> white </div>
                            </div>
                            <div class="modal fade" id="demo_modal_white">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content c-square">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title bold uppercase font-white">white</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="tabbable-line">
                                                <ul class="nav nav-tabs uppercase bold">
                                                    <li class="active">
                                                        <a href="#white_tab_1_content" data-toggle="tab">Typography字体</a>
                                                    </li>
                                                    <li>
                                                        <a href="#white_tab_2_content" data-toggle="tab">背景&布局</a>
                                                    </li>
                                                    <li>
                                                        <a href="#white_tab_3_content" data-toggle="tab">按钮</a>
                                                    </li>
                                                    <li>
                                                        <a href="#white_tab_4_content" data-toggle="tab">组件</a>
                                                    </li>
                                                </ul>
                                                <div class="tab-content">
                                                    <div class="tab-pane active" id="white_tab_1_content">
                                                        <h4>Text font</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <span class="font-white font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-white font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-white font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>文字背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-white">
                                                            <span class="bg-font-white font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-white font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-white font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>图标字体</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <i class="font-white font-lg icon-user"></i>&nbsp;
                                                            <i class="font-white font-lg icon-settings"></i>&nbsp;
                                                            <i class="font-white font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="font-white font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="font-white font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="font-white font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="font-white font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="font-white font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="font-white font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>图标字体背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-white">
                                                            <i class="bg-font-white font-lg icon-user"></i>&nbsp;
                                                            <i class="bg-font-white font-lg icon-settings"></i>&nbsp;
                                                            <i class="bg-font-white font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="bg-font-white font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="bg-font-white font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="bg-font-white font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="bg-font-white font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="bg-font-white font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="bg-font-white font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>例子</h4> <code>class="font-white"</code>
                                                    </div>
                                                    <div class="tab-pane" id="white_tab_2_content">
                                                        <div style="margin: 30px 0;">
                                                            <div class="border-white margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> 带有自定义边框颜色的框 </div> <code>class="border-white"</code>
                                                        </div>
                                                        <div style="margin: 30px 0;">
                                                            <div class="bg-white bg-font-white margin-bottom-10" style="padding: 10px;"> 带有自定义背景色的框 </div> <code>class="bg-white bg-font-white"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="white_tab_3_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn uppercase white">按钮</a> &nbsp; <code>class="btn white"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-outline white">按钮</a> &nbsp; <code>class="c-btn-border-1x c-btn-white"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-circle white">按钮</a> &nbsp; <code>class="btn btn-circle white"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="white_tab_4_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <h4>统计面板</h4>
                                                            <div class="dashboard-stat white">
                                                                <div class="visual">
                                                                    <i class="fa fa-bar-chart-o"></i>
                                                                </div>
                                                                <div class="details">
                                                                    <div class="number"> 12,5M$ </div>
                                                                    <div class="desc"> 总计 </div>
                                                                </div>
                                                                <a class="more" href="javascript:;">
                                                                    查看更多
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </a>
                                                            </div> <code>class="dashboard-stat white"</code>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">关闭</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <div class="color-demo tooltips" data-original-title="点击查看demo" data-toggle="modal" data-target="#demo_modal_default">
                                <div class="color-view bg-default bg-font-default bold uppercase"> #e1e5ec </div>
                                <div class="color-info bg-white c-font-14 sbold"> default </div>
                            </div>
                            <div class="modal fade" id="demo_modal_default">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content c-square">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title bold uppercase font-default">default</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="tabbable-line">
                                                <ul class="nav nav-tabs uppercase bold">
                                                    <li class="active">
                                                        <a href="#default_tab_1_content" data-toggle="tab">Typography字体</a>
                                                    </li>
                                                    <li>
                                                        <a href="#default_tab_2_content" data-toggle="tab">背景&布局</a>
                                                    </li>
                                                    <li>
                                                        <a href="#default_tab_3_content" data-toggle="tab">按钮</a>
                                                    </li>
                                                    <li>
                                                        <a href="#default_tab_4_content" data-toggle="tab">组件</a>
                                                    </li>
                                                </ul>
                                                <div class="tab-content">
                                                    <div class="tab-pane active" id="default_tab_1_content">
                                                        <h4>Text font</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <span class="font-default font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-default font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-default font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>文字背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-default">
                                                            <span class="bg-font-default font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-default font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-default font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>图标字体</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <i class="font-default font-lg icon-user"></i>&nbsp;
                                                            <i class="font-default font-lg icon-settings"></i>&nbsp;
                                                            <i class="font-default font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="font-default font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="font-default font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="font-default font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="font-default font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="font-default font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="font-default font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>图标字体背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-default">
                                                            <i class="bg-font-default font-lg icon-user"></i>&nbsp;
                                                            <i class="bg-font-default font-lg icon-settings"></i>&nbsp;
                                                            <i class="bg-font-default font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="bg-font-default font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="bg-font-default font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="bg-font-default font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="bg-font-default font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="bg-font-default font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="bg-font-default font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>例子</h4> <code>class="font-default"</code>
                                                    </div>
                                                    <div class="tab-pane" id="default_tab_2_content">
                                                        <div style="margin: 30px 0;">
                                                            <div class="border-default margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> 带有自定义边框颜色的框 </div> <code>class="border-default"</code>
                                                        </div>
                                                        <div style="margin: 30px 0;">
                                                            <div class="bg-default bg-font-default margin-bottom-10" style="padding: 10px;"> 带有自定义背景色的框 </div> <code>class="bg-default bg-font-default"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="default_tab_3_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn uppercase default">按钮</a> &nbsp; <code>class="btn default"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-outline default">按钮</a> &nbsp; <code>class="c-btn-border-1x c-btn-default"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-circle default">按钮</a> &nbsp; <code>class="btn btn-circle default"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="default_tab_4_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <h4>统计面板</h4>
                                                            <div class="dashboard-stat default">
                                                                <div class="visual">
                                                                    <i class="fa fa-bar-chart-o"></i>
                                                                </div>
                                                                <div class="details">
                                                                    <div class="number"> 12,5M$ </div>
                                                                    <div class="desc"> 总计 </div>
                                                                </div>
                                                                <a class="more" href="javascript:;">
                                                                    查看更多
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </a>
                                                            </div> <code>class="dashboard-stat default"</code>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">关闭</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <div class="color-demo tooltips" data-original-title="点击查看demo" data-toggle="modal" data-target="#demo_modal_dark">
                                <div class="color-view bg-dark bg-font-dark bold uppercase"> #2f353b </div>
                                <div class="color-info bg-white c-font-14 sbold"> dark </div>
                            </div>
                            <div class="modal fade" id="demo_modal_dark">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content c-square">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title bold uppercase font-dark">dark</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="tabbable-line">
                                                <ul class="nav nav-tabs uppercase bold">
                                                    <li class="active">
                                                        <a href="#dark_tab_1_content" data-toggle="tab">Typography字体</a>
                                                    </li>
                                                    <li>
                                                        <a href="#dark_tab_2_content" data-toggle="tab">背景&布局</a>
                                                    </li>
                                                    <li>
                                                        <a href="#dark_tab_3_content" data-toggle="tab">按钮</a>
                                                    </li>
                                                    <li>
                                                        <a href="#dark_tab_4_content" data-toggle="tab">组件</a>
                                                    </li>
                                                </ul>
                                                <div class="tab-content">
                                                    <div class="tab-pane active" id="dark_tab_1_content">
                                                        <h4>Text font</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <span class="font-dark font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-dark font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-dark font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>文字背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-dark">
                                                            <span class="bg-font-dark font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-dark font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-dark font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>图标字体</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <i class="font-dark font-lg icon-user"></i>&nbsp;
                                                            <i class="font-dark font-lg icon-settings"></i>&nbsp;
                                                            <i class="font-dark font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="font-dark font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="font-dark font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="font-dark font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="font-dark font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="font-dark font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="font-dark font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>图标字体背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-dark">
                                                            <i class="bg-font-dark font-lg icon-user"></i>&nbsp;
                                                            <i class="bg-font-dark font-lg icon-settings"></i>&nbsp;
                                                            <i class="bg-font-dark font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="bg-font-dark font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="bg-font-dark font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="bg-font-dark font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="bg-font-dark font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="bg-font-dark font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="bg-font-dark font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>例子</h4> <code>class="font-dark"</code>
                                                    </div>
                                                    <div class="tab-pane" id="dark_tab_2_content">
                                                        <div style="margin: 30px 0;">
                                                            <div class="border-dark margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> 带有自定义边框颜色的框 </div> <code>class="border-dark"</code>
                                                        </div>
                                                        <div style="margin: 30px 0;">
                                                            <div class="bg-dark bg-font-dark margin-bottom-10" style="padding: 10px;"> 带有自定义背景色的框 </div> <code>class="bg-dark bg-font-dark"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="dark_tab_3_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn uppercase dark">按钮</a> &nbsp; <code>class="btn dark"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-outline dark">按钮</a> &nbsp; <code>class="c-btn-border-1x c-btn-dark"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-circle dark">按钮</a> &nbsp; <code>class="btn btn-circle dark"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="dark_tab_4_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <h4>统计面板</h4>
                                                            <div class="dashboard-stat dark">
                                                                <div class="visual">
                                                                    <i class="fa fa-bar-chart-o"></i>
                                                                </div>
                                                                <div class="details">
                                                                    <div class="number"> 12,5M$ </div>
                                                                    <div class="desc"> 总计 </div>
                                                                </div>
                                                                <a class="more" href="javascript:;">
                                                                    查看更多
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </a>
                                                            </div> <code>class="dashboard-stat dark"</code>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">关闭</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <div class="color-demo tooltips" data-original-title="点击查看demo" data-toggle="modal" data-target="#demo_modal_blue">
                                <div class="color-view bg-blue bg-font-blue bold uppercase"> #3598dc </div>
                                <div class="color-info bg-white c-font-14 sbold"> blue </div>
                            </div>
                            <div class="modal fade" id="demo_modal_blue">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content c-square">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title bold uppercase font-blue">blue</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="tabbable-line">
                                                <ul class="nav nav-tabs uppercase bold">
                                                    <li class="active">
                                                        <a href="#blue_tab_1_content" data-toggle="tab">Typography字体</a>
                                                    </li>
                                                    <li>
                                                        <a href="#blue_tab_2_content" data-toggle="tab">背景&布局</a>
                                                    </li>
                                                    <li>
                                                        <a href="#blue_tab_3_content" data-toggle="tab">按钮</a>
                                                    </li>
                                                    <li>
                                                        <a href="#blue_tab_4_content" data-toggle="tab">组件</a>
                                                    </li>
                                                </ul>
                                                <div class="tab-content">
                                                    <div class="tab-pane active" id="blue_tab_1_content">
                                                        <h4>Text font</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <span class="font-blue font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-blue font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-blue font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>文字背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue">
                                                            <span class="bg-font-blue font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-blue font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-blue font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>图标字体</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <i class="font-blue font-lg icon-user"></i>&nbsp;
                                                            <i class="font-blue font-lg icon-settings"></i>&nbsp;
                                                            <i class="font-blue font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="font-blue font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="font-blue font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="font-blue font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="font-blue font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="font-blue font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="font-blue font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>图标字体背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue">
                                                            <i class="bg-font-blue font-lg icon-user"></i>&nbsp;
                                                            <i class="bg-font-blue font-lg icon-settings"></i>&nbsp;
                                                            <i class="bg-font-blue font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="bg-font-blue font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="bg-font-blue font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="bg-font-blue font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="bg-font-blue font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="bg-font-blue font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="bg-font-blue font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>例子</h4> <code>class="font-blue"</code>
                                                    </div>
                                                    <div class="tab-pane" id="blue_tab_2_content">
                                                        <div style="margin: 30px 0;">
                                                            <div class="border-blue margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> 带有自定义边框颜色的框 </div> <code>class="border-blue"</code>
                                                        </div>
                                                        <div style="margin: 30px 0;">
                                                            <div class="bg-blue bg-font-blue margin-bottom-10" style="padding: 10px;"> 带有自定义背景色的框 </div> <code>class="bg-blue bg-font-blue"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="blue_tab_3_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn uppercase blue">按钮</a> &nbsp; <code>class="btn blue"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-outline blue">按钮</a> &nbsp; <code>class="c-btn-border-1x c-btn-blue"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-circle blue">按钮</a> &nbsp; <code>class="btn btn-circle blue"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="blue_tab_4_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <h4>统计面板</h4>
                                                            <div class="dashboard-stat blue">
                                                                <div class="visual">
                                                                    <i class="fa fa-bar-chart-o"></i>
                                                                </div>
                                                                <div class="details">
                                                                    <div class="number"> 12,5M$ </div>
                                                                    <div class="desc"> 总计 </div>
                                                                </div>
                                                                <a class="more" href="javascript:;">
                                                                    查看更多
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </a>
                                                            </div> <code>class="dashboard-stat blue"</code>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">关闭</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <div class="color-demo tooltips" data-original-title="点击查看demo" data-toggle="modal" data-target="#demo_modal_green">
                                <div class="color-view bg-green bg-font-green bold uppercase"> #32c5d2 </div>
                                <div class="color-info bg-white c-font-14 sbold"> green </div>
                            </div>
                            <div class="modal fade" id="demo_modal_green">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content c-square">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title bold uppercase font-green">green</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="tabbable-line">
                                                <ul class="nav nav-tabs uppercase bold">
                                                    <li class="active">
                                                        <a href="#green_tab_1_content" data-toggle="tab">Typography字体</a>
                                                    </li>
                                                    <li>
                                                        <a href="#green_tab_2_content" data-toggle="tab">背景&布局</a>
                                                    </li>
                                                    <li>
                                                        <a href="#green_tab_3_content" data-toggle="tab">按钮</a>
                                                    </li>
                                                    <li>
                                                        <a href="#green_tab_4_content" data-toggle="tab">组件</a>
                                                    </li>
                                                </ul>
                                                <div class="tab-content">
                                                    <div class="tab-pane active" id="green_tab_1_content">
                                                        <h4>Text font</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <span class="font-green font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-green font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-green font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>文字背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green">
                                                            <span class="bg-font-green font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-green font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-green font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>图标字体</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <i class="font-green font-lg icon-user"></i>&nbsp;
                                                            <i class="font-green font-lg icon-settings"></i>&nbsp;
                                                            <i class="font-green font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="font-green font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="font-green font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="font-green font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="font-green font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="font-green font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="font-green font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>图标字体背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green">
                                                            <i class="bg-font-green font-lg icon-user"></i>&nbsp;
                                                            <i class="bg-font-green font-lg icon-settings"></i>&nbsp;
                                                            <i class="bg-font-green font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="bg-font-green font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="bg-font-green font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="bg-font-green font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="bg-font-green font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="bg-font-green font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="bg-font-green font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>例子</h4> <code>class="font-green"</code>
                                                    </div>
                                                    <div class="tab-pane" id="green_tab_2_content">
                                                        <div style="margin: 30px 0;">
                                                            <div class="border-green margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> 带有自定义边框颜色的框 </div> <code>class="border-green"</code>
                                                        </div>
                                                        <div style="margin: 30px 0;">
                                                            <div class="bg-green bg-font-green margin-bottom-10" style="padding: 10px;"> 带有自定义背景色的框 </div> <code>class="bg-green bg-font-green"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="green_tab_3_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn uppercase green">按钮</a> &nbsp; <code>class="btn green"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-outline green">按钮</a> &nbsp; <code>class="c-btn-border-1x c-btn-green"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-circle green">按钮</a> &nbsp; <code>class="btn btn-circle green"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="green_tab_4_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <h4>统计面板</h4>
                                                            <div class="dashboard-stat green">
                                                                <div class="visual">
                                                                    <i class="fa fa-bar-chart-o"></i>
                                                                </div>
                                                                <div class="details">
                                                                    <div class="number"> 12,5M$ </div>
                                                                    <div class="desc"> 总计 </div>
                                                                </div>
                                                                <a class="more" href="javascript:;">
                                                                    查看更多
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </a>
                                                            </div> <code>class="dashboard-stat green"</code>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">关闭</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <div class="color-demo tooltips" data-original-title="点击查看demo" data-toggle="modal" data-target="#demo_modal_grey">
                                <div class="color-view bg-grey bg-font-grey bold uppercase"> #E5E5E5 </div>
                                <div class="color-info bg-white c-font-14 sbold"> grey </div>
                            </div>
                            <div class="modal fade" id="demo_modal_grey">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content c-square">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title bold uppercase font-grey">grey</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="tabbable-line">
                                                <ul class="nav nav-tabs uppercase bold">
                                                    <li class="active">
                                                        <a href="#grey_tab_1_content" data-toggle="tab">Typography字体</a>
                                                    </li>
                                                    <li>
                                                        <a href="#grey_tab_2_content" data-toggle="tab">背景&布局</a>
                                                    </li>
                                                    <li>
                                                        <a href="#grey_tab_3_content" data-toggle="tab">按钮</a>
                                                    </li>
                                                    <li>
                                                        <a href="#grey_tab_4_content" data-toggle="tab">组件</a>
                                                    </li>
                                                </ul>
                                                <div class="tab-content">
                                                    <div class="tab-pane active" id="grey_tab_1_content">
                                                        <h4>Text font</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <span class="font-grey font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-grey font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-grey font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>文字背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey">
                                                            <span class="bg-font-grey font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-grey font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-grey font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>图标字体</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <i class="font-grey font-lg icon-user"></i>&nbsp;
                                                            <i class="font-grey font-lg icon-settings"></i>&nbsp;
                                                            <i class="font-grey font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="font-grey font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="font-grey font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="font-grey font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="font-grey font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="font-grey font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="font-grey font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>图标字体背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey">
                                                            <i class="bg-font-grey font-lg icon-user"></i>&nbsp;
                                                            <i class="bg-font-grey font-lg icon-settings"></i>&nbsp;
                                                            <i class="bg-font-grey font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="bg-font-grey font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="bg-font-grey font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="bg-font-grey font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="bg-font-grey font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="bg-font-grey font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="bg-font-grey font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>例子</h4> <code>class="font-grey"</code>
                                                    </div>
                                                    <div class="tab-pane" id="grey_tab_2_content">
                                                        <div style="margin: 30px 0;">
                                                            <div class="border-grey margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> 带有自定义边框颜色的框 </div> <code>class="border-grey"</code>
                                                        </div>
                                                        <div style="margin: 30px 0;">
                                                            <div class="bg-grey bg-font-grey margin-bottom-10" style="padding: 10px;"> 带有自定义背景色的框 </div> <code>class="bg-grey bg-font-grey"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="grey_tab_3_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn uppercase grey">按钮</a> &nbsp; <code>class="btn grey"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-outline grey">按钮</a> &nbsp; <code>class="c-btn-border-1x c-btn-grey"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-circle grey">按钮</a> &nbsp; <code>class="btn btn-circle grey"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="grey_tab_4_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <h4>统计面板</h4>
                                                            <div class="dashboard-stat grey">
                                                                <div class="visual">
                                                                    <i class="fa fa-bar-chart-o"></i>
                                                                </div>
                                                                <div class="details">
                                                                    <div class="number"> 12,5M$ </div>
                                                                    <div class="desc"> 总计 </div>
                                                                </div>
                                                                <a class="more" href="javascript:;">
                                                                    查看更多
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </a>
                                                            </div> <code>class="dashboard-stat grey"</code>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">关闭</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <div class="color-demo tooltips" data-original-title="点击查看demo" data-toggle="modal" data-target="#demo_modal_red">
                                <div class="color-view bg-red bg-font-red bold uppercase"> #e7505a </div>
                                <div class="color-info bg-white c-font-14 sbold"> red </div>
                            </div>
                            <div class="modal fade" id="demo_modal_red">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content c-square">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title bold uppercase font-red">red</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="tabbable-line">
                                                <ul class="nav nav-tabs uppercase bold">
                                                    <li class="active">
                                                        <a href="#red_tab_1_content" data-toggle="tab">Typography字体</a>
                                                    </li>
                                                    <li>
                                                        <a href="#red_tab_2_content" data-toggle="tab">背景&布局</a>
                                                    </li>
                                                    <li>
                                                        <a href="#red_tab_3_content" data-toggle="tab">按钮</a>
                                                    </li>
                                                    <li>
                                                        <a href="#red_tab_4_content" data-toggle="tab">组件</a>
                                                    </li>
                                                </ul>
                                                <div class="tab-content">
                                                    <div class="tab-pane active" id="red_tab_1_content">
                                                        <h4>Text font</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <span class="font-red font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-red font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-red font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>文字背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red">
                                                            <span class="bg-font-red font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-red font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-red font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>图标字体</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <i class="font-red font-lg icon-user"></i>&nbsp;
                                                            <i class="font-red font-lg icon-settings"></i>&nbsp;
                                                            <i class="font-red font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="font-red font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="font-red font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="font-red font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="font-red font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="font-red font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="font-red font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>图标字体背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red">
                                                            <i class="bg-font-red font-lg icon-user"></i>&nbsp;
                                                            <i class="bg-font-red font-lg icon-settings"></i>&nbsp;
                                                            <i class="bg-font-red font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="bg-font-red font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="bg-font-red font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="bg-font-red font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="bg-font-red font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="bg-font-red font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="bg-font-red font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>例子</h4> <code>class="font-red"</code>
                                                    </div>
                                                    <div class="tab-pane" id="red_tab_2_content">
                                                        <div style="margin: 30px 0;">
                                                            <div class="border-red margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> 带有自定义边框颜色的框 </div> <code>class="border-red"</code>
                                                        </div>
                                                        <div style="margin: 30px 0;">
                                                            <div class="bg-red bg-font-red margin-bottom-10" style="padding: 10px;"> 带有自定义背景色的框 </div> <code>class="bg-red bg-font-red"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="red_tab_3_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn uppercase red">按钮</a> &nbsp; <code>class="btn red"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-outline red">按钮</a> &nbsp; <code>class="c-btn-border-1x c-btn-red"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-circle red">按钮</a> &nbsp; <code>class="btn btn-circle red"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="red_tab_4_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <h4>统计面板</h4>
                                                            <div class="dashboard-stat red">
                                                                <div class="visual">
                                                                    <i class="fa fa-bar-chart-o"></i>
                                                                </div>
                                                                <div class="details">
                                                                    <div class="number"> 12,5M$ </div>
                                                                    <div class="desc"> 总计 </div>
                                                                </div>
                                                                <a class="more" href="javascript:;">
                                                                    查看更多
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </a>
                                                            </div> <code>class="dashboard-stat red"</code>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">关闭</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 col-sm-2 col-xs-6">
                            <div class="color-demo tooltips" data-original-title="点击查看demo" data-toggle="modal" data-target="#demo_modal_purple">
                                <div class="color-view bg-purple bg-font-purple bold uppercase"> #8E44AD </div>
                                <div class="color-info bg-white c-font-14 sbold"> purple </div>
                            </div>
                            <div class="modal fade" id="demo_modal_purple">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content c-square">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title bold uppercase font-purple">purple</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="tabbable-line">
                                                <ul class="nav nav-tabs uppercase bold">
                                                    <li class="active">
                                                        <a href="#purple_tab_1_content" data-toggle="tab">Typography字体</a>
                                                    </li>
                                                    <li>
                                                        <a href="#purple_tab_2_content" data-toggle="tab">背景&布局</a>
                                                    </li>
                                                    <li>
                                                        <a href="#purple_tab_3_content" data-toggle="tab">按钮</a>
                                                    </li>
                                                    <li>
                                                        <a href="#purple_tab_4_content" data-toggle="tab">组件</a>
                                                    </li>
                                                </ul>
                                                <div class="tab-content">
                                                    <div class="tab-pane active" id="purple_tab_1_content">
                                                        <h4>Text font</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <span class="font-purple font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-purple font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="font-purple font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>文字背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple">
                                                            <span class="bg-font-purple font-lg">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-purple font-lg sbold">请在这里输入信息...</span>
                                                            <br>
                                                            <span class="bg-font-purple font-lg bold uppercase">请在这里输入信息...</span>
                                                        </div>
                                                        <h4>图标字体</h4>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <i class="font-purple font-lg icon-user"></i>&nbsp;
                                                            <i class="font-purple font-lg icon-settings"></i>&nbsp;
                                                            <i class="font-purple font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="font-purple font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="font-purple font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="font-purple font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="font-purple font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="font-purple font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="font-purple font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>图标字体背景</h4>
                                                        <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple">
                                                            <i class="bg-font-purple font-lg icon-user"></i>&nbsp;
                                                            <i class="bg-font-purple font-lg icon-settings"></i>&nbsp;
                                                            <i class="bg-font-purple font-lg icon-calendar"></i>
                                                            <br>
                                                            <i class="bg-font-purple font-lg fa fa-bar-chart-o"></i>&nbsp;
                                                            <i class="bg-font-purple font-lg fa fa-code-fork icon-settings"></i>&nbsp;
                                                            <i class="bg-font-purple font-lg fa fa-cogs"></i>
                                                            <br>
                                                            <i class="bg-font-purple font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
                                                            <i class="bg-font-purple font-lg glyphicon glyphicon-leaf"></i>&nbsp;
                                                            <i class="bg-font-purple font-lg glyphicon glyphicon-warning-sign"></i>
                                                            <br>
                                                        </div>
                                                        <h4>例子</h4> <code>class="font-purple"</code>
                                                    </div>
                                                    <div class="tab-pane" id="purple_tab_2_content">
                                                        <div style="margin: 30px 0;">
                                                            <div class="border-purple margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> 带有自定义边框颜色的框 </div> <code>class="border-purple"</code>
                                                        </div>
                                                        <div style="margin: 30px 0;">
                                                            <div class="bg-purple bg-font-purple margin-bottom-10" style="padding: 10px; "> 带有自定义背景色的框 </div> <code>class="bg-purple bg-font-purple"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="purple_tab_3_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn uppercase purple">按钮</a> &nbsp; <code>class="btn purple"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-outline purple">按钮</a> &nbsp; <code>class="c-btn-border-1x c-btn-purple"</code>
                                                        </div>
                                                        <div style="margin: 10px 0 30px 0">
                                                            <a href="#" class="btn sbold uppercase btn-circle purple">按钮</a> &nbsp; <code>class="btn btn-circle purple"</code>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="purple_tab_4_content">
                                                        <div style="margin: 10px 0 30px 0">
                                                            <h4>统计面板</h4>
                                                            <div class="dashboard-stat purple">
                                                                <div class="visual">
                                                                    <i class="fa fa-bar-chart-o"></i>
                                                                </div>
                                                                <div class="details">
                                                                    <div class="number"> 12,5M$ </div>
                                                                    <div class="desc"> 总计 </div>
                                                                </div>
                                                                <a class="more" href="javascript:;">
                                                                    查看更多
                                                                    <i class="m-icon-swapright m-icon-white"></i>
                                                                </a>
                                                            </div> <code>class="dashboard-stat purple"</code>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">关闭</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END FOOTER -->
    <!--[if lt IE 9]>
    <script src="../content/superui/base/base-core/excanvas.min.js"></script>
    <script src="../content/superui/base/base-core/respond.min.js"></script>
    <![endif]-->
    <!-- 全局公共类库Begin -->
    <script src="../content/superui/min/js/superui.common.min.js"></script>
</body>
</html>